<template>
  <div class="cms-views-container open-memner-pages">
    <header class="h-10 px-4 leading-10 text-center">
      <span class="float-left">
        <LeftOutlined class="text-base" />
      </span>
      <span class="text-base text-[#333] font-medium">开通会员</span>
    </header>
    <div class="px-4 h-[69px] flex items-center">
      <img
        src="https://img2.baidu.com/it/u=939903330,3137313886&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=384"
        class="w-[29px] h-[29px]"
        style="border-radius: 50%"
        alt=""
      />
      <span class="pl-2">
        <h4 class="text-[10px] text-black font-medium mb-[2px]">大大马里奥</h4>
        <span class="text-[10px] text-[#999]">您当前未开通VIP会员</span>
      </span>
    </div>
    <div class="flex flex-wrap px-4 mt-4 gap-x-4 gap-y-4">
      <div
        v-for="item in memberList"
        :key="item.type"
        class="w-[163px] h-[163px] px-4 member-item pt-6"
        :class="item.type === 'VIP月卡' ? 'active-item' : ''"
      >
        <span class="text-lg font-medium" :class="item.type === 'VIP月卡' ? 'text-[#ff613f]' : 'text-black'">{{
          item.type
        }}</span>
        <h3 class="text-[44px] m-0 font-semibold" :class="item.type === 'VIP月卡' ? 'text-[#ff613f]' : 'text-black'">
          <span class="text-lg font-normal">￥</span>{{ item.money }}
        </h3>
        <span class="line-through text-[#999] text-[11px]"><span>￥</span>{{ item.oldMoney }}</span>
      </div>
    </div>

    <button
      class="mx-4 h-11 w-[323px] absolute bottom-4 left-4 right-4 border-0 text-white text-base font-medium rounded-3xl sure-btn"
    >
      确认购买并支付 <span>￥10</span>
    </button>
  </div>
</template>

<script setup lang="ts">
const memberList = [
  {
    type: 'VIP月卡',
    money: '10',
    oldMoney: '20'
  },
  {
    type: 'VIP季卡',
    money: '20',
    oldMoney: '60'
  },
  {
    type: 'VIP半年卡',
    money: '50',
    oldMoney: '120'
  },
  {
    type: 'VIP年卡',
    money: '100',
    oldMoney: '240'
  }
]
</script>

<style scoped lang="less">
.open-memner-pages {
  .member-item {
    @apply text-center rounded-lg  bg-white;
    box-shadow: 1px 1px 10px 0 rgba(85, 85, 85, 0.09);
  }
  .active-item {
    border: 2px solid #ff613f;
    background: rgba(255, 97, 63, 0.1);
    box-shadow: 1px 1px 10px 0 rgba(255, 97, 63, 0.3);
  }
  .sure-btn {
    background-image: linear-gradient(90deg, #ff9a73 0%, #ff613f 100%);
  }
}
</style>
